<template>
  <form action="/public">
    <van-search
        v-model="value"
        show-action
        placeholder="请输入要搜索的标签"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>
  <van-divider>已选择标签</van-divider>
  <div v-if="activeIds.length===0">请选择标签</div>

  <!-- 设置垂直间距 -->
  <van-row :gutter="[30, 20]">
    <van-col v-for="tag in activeIds" style="padding: 3px">
      <van-tag closeable size="large" type="primary" @close="doClose(tag)">{{ tag }}</van-tag>
    </van-col>

  </van-row>

  <van-divider>选择标签</van-divider>
  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="tagList"
  />
  <div style="padding: 20px">
    <van-button type="primary" @click="doSearchResult" block> 搜索</van-button>

  </div>

</template>

<script setup lang="ts">
import {ref} from 'vue';

import {useRouter} from "vue-router";

const router = useRouter();

// 搜索相关
const value = ref('');

//搜索标签
const onSearch = () => {
  tagList.value = originTagList.map(parentTag => {
    const tempParentTag = {...parentTag};
    const tempChildren = [...parentTag.children];
    tempParentTag.children = tempChildren.filter(item => item.text.includes(value.value))
    // 如果子标签为空，返回 null
    if (tempParentTag.children.length === 0) {
      return null;
    }
    console.log(tempParentTag)
    return tempParentTag;
  }).filter(Boolean) as { text: string; children: { text: string; id: string }[] } [];
};
// 清空内容时
const onCancel = () => {
  value.value = '';
  tagList = ref(originTagList);
};

// 标签
const doClose = (tag: string) => {
  activeIds.value = activeIds.value.filter(item => {
    return item !== tag;
  })
}


// 选择器
// 已选中标签
const activeIds = ref([]);

const activeIndex = ref(0);

const originTagList = [
  {
    text: '性别',
    children: [
      {text: '男', id: '男'},
      {text: '女', id: '女'},
    ],
  },
  {
    text: '技术',
    children: [
      {text: 'java', id: 'java'},
      {text: 'python', id: 'python'},
      {text: 'c++', id: 'c++'},
      {text: 'javascript', id: 'javascript'},
      {text: 'go', id: 'go'},
      {text: 'html', id: 'html'},
      {text: 'css', id: 'css'},
      {text: 'react', id: 'react'},
      {text: 'vue', id: 'vue'},
      {text: 'nodejs', id: 'nodejs'},
      {text: 'typescript', id: 'typescript'},
      {text: 'php', id: 'php'},
      {text: 'ruby', id: 'ruby'},
      {text: 'swift', id: 'swift'},
      {text: 'kotlin', id: 'kotlin'},
      {text: 'scala', id: 'scala'},
      {text: 'rust', id: 'rust'},
      {text: 'dart', id: 'dart'},
      {text: 'elixir', id: 'elixir'},
      {text: 'clojure', id: 'clojure'},
      {text: 'perl', id: 'perl'},
      {text: 'r', id: 'r'},
      {text: 'matlab', id: 'matlab'},
      {text: 'bash', id: 'bash'},
      {text: 'shell', id: 'shell'},
      {text: 'powershell', id: 'powershell'},
      {text: 'groovy', id: 'groovy'},
      {text: 'lua', id: 'lua'},
      {text: 'haskell', id: 'haskell'},
      {text: 'erlang', id: 'erlang'},
      {text: 'objective-c', id: 'objective-c'},
      {text: 'assembly', id: 'assembly'},
      {text: 'cobol', id: 'cobol'},
      {text: 'fortran', id: 'fortran'},
      {text: 'pascal', id: 'pascal'},
      {text: 'prolog', id: 'prolog'},
      {text: 'lisp', id: 'lisp'},
      {text: 'scheme', id: 'scheme'},
      {text: 'ada', id: 'ada'},
      {text: 'f#', id: 'f#'},
      {text: 'ocaml', id: 'ocaml'},
      {text: 'smalltalk', id: 'smalltalk'},
      {text: 'delphi', id: 'delphi'},
      {text: 'abap', id: 'abap'},
      {text: 'plsql', id: 'plsql'},
      {text: 'tcl', id: 'tcl'},
      {text: 'awk', id: 'awk'},
      {text: 'sed', id: 'sed'},
      {text: 'vimscript', id: 'vimscript'},
      {text: 'julia', id: 'julia'},
      {text: 'django', id: 'django'},
      {text: 'flask', id: 'flask'},
      {text: 'spring', id: 'spring'},
      {text: 'laravel', id: 'laravel'},
      {text: 'rails', id: 'rails'},
      {text: 'express', id: 'express'},
      {text: 'nestjs', id: 'nestjs'},
      {text: 'graphql', id: 'graphql'},
      {text: 'apollo', id: 'apollo'},
      {text: 'redux', id: 'redux'},
    ],
  },
  {
    text: '兴趣',
    children: [
      {text: '阅读', id: '阅读'},
      {text: '旅行', id: '旅行'},
      {text: '美食', id: '美食'},
      {text: '电影', id: '电影'},
      {text: '音乐', id: '音乐'},
      {text: '摄影', id: '摄影'},
      {text: '写作', id: '写作'},
      {text: '编程', id: '编程'},
      {text: '游戏', id: '游戏'},
      {text: '设计', id: '设计'},
      {text: '创业', id: '创业'},
      {text: '学习', id: '学习'},
      {text: '科技', id: '科技'},
      {text: '历史', id: '历史'},
      {text: '心理学', id: '心理学'},
      {text: '桌游', id: '桌游'},
      {text: '棋牌', id: '棋牌'},
      {text: '魔术', id: '魔术'},
      {text: '拼图', id: '拼图'},
      {text: '模型制作', id: '模型制作'},
      {text: '收藏', id: '收藏'},
      {text: '天文观测', id: '天文观测'},
      {text: '观鸟', id: '观鸟'},
      {text: '养宠物', id: '养宠物'},
      {text: '植物养护', id: '植物养护'},
      {text: '写作小说', id: '写作小说'},
      {text: '写诗', id: '写诗'},
      {text: '写博客', id: '写博客'},
      {text: '写日记', id: '写日记'},
      {text: '写剧本', id: '写剧本'},
      {text: '写歌词', id: '写歌词'},
      {text: '写游记', id: '写游记'},
      {text: '写评论', id: '写评论'},
      {text: '写技术文章', id: '写技术文章'},
      {text: '写散文', id: '写散文'},
    ],
  },
  {
    text: '运动',
    children: [
      {text: '运动', id: '运动'},
      {text: '健身', id: '健身'},
      {text: '舞蹈', id: '舞蹈'},
      {text: '瑜伽', id: '瑜伽'},
      {text: '冥想', id: '冥想'},
      {text: '登山', id: '登山'},
      {text: '骑行', id: '骑行'},
      {text: '游泳', id: '游泳'},
      {text: '跑步', id: '跑步'},
      {text: '滑雪', id: '滑雪'},
      {text: '滑板', id: '滑板'},
      {text: '攀岩', id: '攀岩'},
      {text: '潜水', id: '潜水'},
      {text: '跳伞', id: '跳伞'},
    ],
  },
  {
    text: '艺术',
    children: [
      {text: '绘画', id: '绘画'},
      {text: '手工', id: '手工'},
      {text: '摄影后期', id: '摄影后期'},
      {text: '视频剪辑', id: '视频剪辑'},
      {text: '音乐制作', id: '音乐制作'},
      {text: '乐器演奏', id: '乐器演奏'},
      {text: '书法', id: '书法'},
      {text: '篆刻', id: '篆刻'},
      {text: '陶艺', id: '陶艺'},
      {text: '刺绣', id: '刺绣'},
      {text: '编织', id: '编织'},
      {text: '木工', id: '木工'},
    ],
  },
  {
    text: '其他',
    children: [
      {text: '烹饪', id: '烹饪'},
      {text: '烘焙', id: '烘焙'},
      {text: '园艺', id: '园艺'},
      {text: '钓鱼', id: '钓鱼'},
      {text: '露营', id: '露营'},
    ],
  },
];
// 标签列表
let tagList = ref(originTagList);
const doSearchResult = () => {
  router.push({
    path: '/user/list',
    query: {
      tags: activeIds.value
    }
  })
}


</script>

<style scoped>

</style>